<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    
    <title>conci</title>
    <meta name="description" content="求知若饥 虚心若愚">
<meta property="og:type" content="website">
<meta property="og:title" content="cc">
<meta property="og:url" content="http://www.ccblog.win/page/2/index.html">
<meta property="og:site_name" content="cc">
<meta property="og:description" content="求知若饥 虚心若愚">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="cc">
<meta name="twitter:description" content="求知若饥 虚心若愚">
    
        <link rel="alternate" href="true" title="cc" type="application/atom+xml">
    
    
        <link rel="icon" href="/favicon.ico">
    
    <link rel="stylesheet" href="/css/concise.css">
    <script src="/js/concise.js"></script>
    <script>
        (function(){
            var useragent=navigator.userAgent;
            console.log(navigator,useragent);
            var isM;
            if(useragent.indexOf('iPhone')!=-1){
                isM=true;
            }else if(useragent.indexOf('Android ')!=-1){
                isM=true;
            }else if(useragent.indexOf('iPad')!=-1){
                isM=true;
            }else{
                isM=false;
            }
            if(isM){
                document.documentElement.style.fontSize=document.documentElement.clientWidth/375*100+'px';
                window.onresize=function(){
                    document.documentElement.style.fontSize=document.documentElement.clientWidth/375*100+'px';
                };
            }
        })();
    </script>
    
        <script type="text/javascript" id="hexo.configuration">
            var CONFIG = {
                root: '/',
                algolia: {
                    applicationID: '148WKKLBJ2',
                    apiKey: '1b27867f0ba7ad358543a84d6d30bcb3',
                    indexName: 'test',
                    hits: {
                        per_page: ''
                    },
                    labels: {
                        input_placeholder: '请输入要搜索的字段...',
                        hits_empty: '没有查找到和 「${query}」相关的内容',
                        hits_stats: '总共${hits} 条相关条目，使用了 ${time} 毫秒'
                    }
                }
            };
        </script>
    
    <script src="http://opu30aljn.bkt.clouddn.com/jquery.js"></script>
    
        <script src="http://opu30aljn.bkt.clouddn.com/instantsearch.js"></script>
        <script src="/js/thirdparty/algolia.js"></script>
    
    <script src="/js/script.js"></script>
</head>
<body>
<input type="checkbox" id="left-information">
<div id="wrapper">
    <div id="bgg"></div>
    <header id="header">
    <nav id="nav" class="clearfix">
        <label for="left-information"></label>
        <ul class='nav-left'>
            <li><a href="/">ccblog</a></li>
        </ul>
        <input type="checkbox" id="header-right-nav">
        <ul class="clearfix nav-right">
            
            <li><a href="/">Home</a></li>
            
            <li><a href="/about">About</a></li>
            
            <li><a href="/contact">Contact</a></li>
            
            <li><a href="/archives">Archives</a></li>
            
            <li><a href="/tags">tags</a></li>
            
        </ul>
        <label for="header-right-nav"><i></i></label>
    </nav>
</header>
    <article id="logo">
    <div id="logo-content">
        <header>
            <a href="">cc&#39;s .blog<b>conci</b></a>
        </header>
        <p>
            conci theme 1.0.0<br>
            Simple and practical hexo personal blog theme.<br>
            The freedom to choose
        </p>
    </div>
</article>
    <div id="main" class="clearfix">
        <section id="main-left" class="left">
            
    
        
            <article class="post">
    <h3><a href="/2017/04/03/css水平垂直居中/">css水平垂直居中</a></h3>
    <p>
        
            <span class="visitors">visitors
                <span id="/2017/04/03/css水平垂直居中/" class="leancloud_visitors" data-flag-title="css水平垂直居中">
                    <span class="leancloud-visitors-count">0</span>
                </span>
            </span>&nbsp;&nbsp;•&nbsp;&nbsp;
        
        <span class="tag">
                    <a class="article-category-link" href="/categories/css/">css</a>
                </span>&nbsp;&nbsp;•&nbsp;&nbsp;
        <span class="date">2017,04,03</span>
    </p>
    <div class="post-image">
        <a href="/2017/04/03/css水平垂直居中/"><img src="http://ooa3lxrpg.bkt.clouddn.com/10.jpg"></a>
    </div>
    
        
        <div class="page-content">要让下图中绿色框水平垂直居中，你是怎么实现的，可能每个人都有自己习惯的使用方法。下面是我总结的几种方法废话不多说，直接上菜。1.利用绝对定位方法：把top和 left 偏移 50%，在用margin 偏移回去。适合：已经固定大小的元素。做响应的话可能根据实际需要还需要js的操作。1234567891011121314151617181920div1&amp;#123;    background:gold...</div>
    
    <div class="post-readmore">
        <a href="/2017/04/03/css水平垂直居中/">Read More</a>
    </div>
</article>
        
            <article class="post">
    <h3><a href="/2017/03/30/伪类和伪元素的区别 - 副本/">伪类和伪元素的区别</a></h3>
    <p>
        
            <span class="visitors">visitors
                <span id="/2017/03/30/伪类和伪元素的区别 - 副本/" class="leancloud_visitors" data-flag-title="伪类和伪元素的区别">
                    <span class="leancloud-visitors-count">0</span>
                </span>
            </span>&nbsp;&nbsp;•&nbsp;&nbsp;
        
        <span class="tag">
                    <a class="article-category-link" href="/categories/css/">css</a>
                </span>&nbsp;&nbsp;•&nbsp;&nbsp;
        <span class="date">2017,03,30</span>
    </p>
    <div class="post-image">
        <a href="/2017/03/30/伪类和伪元素的区别 - 副本/"><img src="http://ooa3lxrpg.bkt.clouddn.com/4.jpg"></a>
    </div>
    
        
        <div class="page-content">伪类和伪元素作为前端搞事情的各位应该常听说，而且也一直在使用着，那他们到底真正的有什么区别呢。下面咱们就说说。其实在css1和css2中伪类和伪元素没有明确区分开来，从都是使用一个冒号：可了解。但这明显是不对的，所以在css3中对伪类和伪元素无论是概念还是使用方式上都做了明确的区分。从伪类还是使用一个冒号：，但是伪元素是使用两个：可了解。那他们到底怎么区分的呢。css3之前的伪类和伪元素解释先来看...</div>
    
    <div class="post-readmore">
        <a href="/2017/03/30/伪类和伪元素的区别 - 副本/">Read More</a>
    </div>
</article>
        
            <article class="post">
    <h3><a href="/2017/03/30/伪类和伪元素的区别 - 副本 - 副本/">伪类和伪元素的区别</a></h3>
    <p>
        
            <span class="visitors">visitors
                <span id="/2017/03/30/伪类和伪元素的区别 - 副本 - 副本/" class="leancloud_visitors" data-flag-title="伪类和伪元素的区别">
                    <span class="leancloud-visitors-count">0</span>
                </span>
            </span>&nbsp;&nbsp;•&nbsp;&nbsp;
        
        <span class="tag">
                    <a class="article-category-link" href="/categories/css/">css</a>
                </span>&nbsp;&nbsp;•&nbsp;&nbsp;
        <span class="date">2017,03,30</span>
    </p>
    <div class="post-image">
        <a href="/2017/03/30/伪类和伪元素的区别 - 副本 - 副本/"><img src="http://ooa3lxrpg.bkt.clouddn.com/5.jpg"></a>
    </div>
    
        
        <div class="page-content">伪类和伪元素作为前端搞事情的各位应该常听说，而且也一直在使用着，那他们到底真正的有什么区别呢。下面咱们就说说。其实在css1和css2中伪类和伪元素没有明确区分开来，从都是使用一个冒号：可了解。但这明显是不对的，所以在css3中对伪类和伪元素无论是概念还是使用方式上都做了明确的区分。从伪类还是使用一个冒号：，但是伪元素是使用两个：可了解。那他们到底怎么区分的呢。css3之前的伪类和伪元素解释先来看...</div>
    
    <div class="post-readmore">
        <a href="/2017/03/30/伪类和伪元素的区别 - 副本 - 副本/">Read More</a>
    </div>
</article>
        
            <article class="post">
    <h3><a href="/2017/03/30/伪类和伪元素的区别/">伪类和伪元素的区别</a></h3>
    <p>
        
            <span class="visitors">visitors
                <span id="/2017/03/30/伪类和伪元素的区别/" class="leancloud_visitors" data-flag-title="伪类和伪元素的区别">
                    <span class="leancloud-visitors-count">0</span>
                </span>
            </span>&nbsp;&nbsp;•&nbsp;&nbsp;
        
        <span class="tag">
                    <a class="article-category-link" href="/categories/css/">css</a>
                </span>&nbsp;&nbsp;•&nbsp;&nbsp;
        <span class="date">2017,03,30</span>
    </p>
    <div class="post-image">
        <a href="/2017/03/30/伪类和伪元素的区别/"><img src="http://ooa3lxrpg.bkt.clouddn.com/12.jpg"></a>
    </div>
    
        
        <div class="page-content">伪类和伪元素作为前端搞事情的各位应该常听说，而且也一直在使用着，那他们到底真正的有什么区别呢。下面咱们就说说。其实在css1和css2中伪类和伪元素没有明确区分开来，从都是使用一个冒号：可了解。但这明显是不对的，所以在css3中对伪类和伪元素无论是概念还是使用方式上都做了明确的区分。从伪类还是使用一个冒号：，但是伪元素是使用两个：可了解。那他们到底怎么区分的呢。css3之前的伪类和伪元素解释先来看...</div>
    
    <div class="post-readmore">
        <a href="/2017/03/30/伪类和伪元素的区别/">Read More</a>
    </div>
</article>
        
            <article class="post">
    <h3><a href="/2017/03/20/纯css点击效果/">纯css点击效果</a></h3>
    <p>
        
            <span class="visitors">visitors
                <span id="/2017/03/20/纯css点击效果/" class="leancloud_visitors" data-flag-title="纯css点击效果">
                    <span class="leancloud-visitors-count">0</span>
                </span>
            </span>&nbsp;&nbsp;•&nbsp;&nbsp;
        
        <span class="tag">
                    <a class="article-category-link" href="/categories/css/">css</a>
                </span>&nbsp;&nbsp;•&nbsp;&nbsp;
        <span class="date">2017,03,20</span>
    </p>
    <div class="post-image">
        <a href="/2017/03/20/纯css点击效果/"><img src="http://ooa3lxrpg.bkt.clouddn.com/7.jpg"></a>
    </div>
    
        
        <div class="page-content">平时网页中如果需要出现点击效果的按钮或是菜单，你可能首先想到的是js的点击事件，实现这些利用js虽然也简单，但毕竟是脚本，运行起来，性能上还是会慢些，其实有些点击效果用css也可以实现，运行css那可就比js快多了，下面总结一些用纯css实现的点击效果。1.利用单选框和复选框例如效果html1&amp;lt;input type=&quot;checkbox&quot; id=&quot;p&quot;&amp;gt;&amp;lt;label for=&quot;p&quot;...</div>
    
    <div class="post-readmore">
        <a href="/2017/03/20/纯css点击效果/">Read More</a>
    </div>
</article>
        
            <article class="post">
    <h3><a href="/2017/03/19/css颜色表示种类/">hsl颜色表示法</a></h3>
    <p>
        
            <span class="visitors">visitors
                <span id="/2017/03/19/css颜色表示种类/" class="leancloud_visitors" data-flag-title="hsl颜色表示法">
                    <span class="leancloud-visitors-count">0</span>
                </span>
            </span>&nbsp;&nbsp;•&nbsp;&nbsp;
        
        <span class="tag">
                    <a class="article-category-link" href="/categories/css3/">css3</a>
                </span>&nbsp;&nbsp;•&nbsp;&nbsp;
        <span class="date">2017,03,19</span>
    </p>
    <div class="post-image">
        <a href="/2017/03/19/css颜色表示种类/"><img src="http://ooa3lxrpg.bkt.clouddn.com/2.jpg"></a>
    </div>
    
        
        <div class="page-content">css颜色表示法通常常用和最常见的三种123background-color:red;background-color:#ff0000;background-color:rgb(255,0,0);hsl颜色表示法，不知大家用没用过，反正我到我写这篇博客之前一直没用过。1backgroud-color:hsl(0,100%,54%);是不是感觉写法和rgb很像，rgb分别代表三原色，hsl分别代表色...</div>
    
    <div class="post-readmore">
        <a href="/2017/03/19/css颜色表示种类/">Read More</a>
    </div>
</article>
        
            <article class="post">
    <h3><a href="/2017/03/14/hexo主题配置和修改样式/">hexo的next主题配置和优化</a></h3>
    <p>
        
            <span class="visitors">visitors
                <span id="/2017/03/14/hexo主题配置和修改样式/" class="leancloud_visitors" data-flag-title="hexo的next主题配置和优化">
                    <span class="leancloud-visitors-count">0</span>
                </span>
            </span>&nbsp;&nbsp;•&nbsp;&nbsp;
        
        <span class="tag">
                    <a class="article-category-link" href="/categories/hexo博客搭建/">hexo博客搭建</a>
                </span>&nbsp;&nbsp;•&nbsp;&nbsp;
        <span class="date">2017,03,14</span>
    </p>
    <div class="post-image">
        <a href="/2017/03/14/hexo主题配置和修改样式/"><img src="http://ooa3lxrpg.bkt.clouddn.com/11.jpg"></a>
    </div>
    
        
        <div class="page-content">继续叨叨叨上一篇介绍了hexo的安装和部署（还没部署的小伙伴点这里)，这篇咱们接着上篇介绍怎么应用主题next和优化next。next主题hexo的主题很多，但还是觉得next符合我的感觉，简洁大气，耐看。毕竟是博客，文章才是最主要的，花里胡哨的主题太宣兵夺主了。下载应用nexthexo的主题都存放在themes文件夹下，在themes文件夹下右键Git bash Here，输入：1$ git c...</div>
    
    <div class="post-readmore">
        <a href="/2017/03/14/hexo主题配置和修改样式/">Read More</a>
    </div>
</article>
        
            <article class="post">
    <h3><a href="/2017/03/12/hexo个人博客搭建/">hexo个人博客搭建</a></h3>
    <p>
        
            <span class="visitors">visitors
                <span id="/2017/03/12/hexo个人博客搭建/" class="leancloud_visitors" data-flag-title="hexo个人博客搭建">
                    <span class="leancloud-visitors-count">0</span>
                </span>
            </span>&nbsp;&nbsp;•&nbsp;&nbsp;
        
        <span class="tag">
                    <a class="article-category-link" href="/categories/hexo博客搭建/">hexo博客搭建</a>
                </span>&nbsp;&nbsp;•&nbsp;&nbsp;
        <span class="date">2017,03,12</span>
    </p>
    <div class="post-image">
        <a href="/2017/03/12/hexo个人博客搭建/"><img src="http://ooa3lxrpg.bkt.clouddn.com/12.jpg"></a>
    </div>
    
        
        <div class="page-content">叨的叨叨以叨叨，那是什么叨该说啥呢。。。博客不是第一次写，但在自己搭建的博客上写文章的确是第一次。十分兴奋。看着自己辛苦搭建出来的博客，一点一点达到自己心目中的样子，这种感觉只有做过的人才可以体会到。如果你还在犹豫，那就别墨迹了。废话不多说。搭建自己的博客，当时我查的时候好多人推荐用Wordpress，既然这么多人推荐，那我就不用，怎么滴。好吧被看穿了，其实是我太穷了，没钱租服务器。虽然好像也可以...</div>
    
    <div class="post-readmore">
        <a href="/2017/03/12/hexo个人博客搭建/">Read More</a>
    </div>
</article>
        
            <article class="post">
    <h3><a href="/2017/03/01/hello-world/">Hello World</a></h3>
    <p>
        
            <span class="visitors">visitors
                <span id="/2017/03/01/hello-world/" class="leancloud_visitors" data-flag-title="Hello World">
                    <span class="leancloud-visitors-count">0</span>
                </span>
            </span>&nbsp;&nbsp;•&nbsp;&nbsp;
        
        <span class="tag">
                    <a class="article-category-link" href="/categories/hexo博客搭建/">hexo博客搭建</a>
                </span>&nbsp;&nbsp;•&nbsp;&nbsp;
        <span class="date">2017,03,01</span>
    </p>
    <div class="post-image">
        <a href="/2017/03/01/hello-world/"><img src="http://ooa3lxrpg.bkt.clouddn.com/2.jpg"></a>
    </div>
    
        
        <div class="page-content">Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.Quick ...</div>
    
    <div class="post-readmore">
        <a href="/2017/03/01/hello-world/">Read More</a>
    </div>
</article>
        
    


<nav id="index-pading">
    pages:&nbsp;&nbsp;
    <a class="extend prev" rel="prev" href="/"><span class="index-prev">«&nbsp;</span></a><a class="page-number" href="/">1</a><span class="page-number current">2</span>
</nav>

        </section>
        <section id="main-right" class="right">
            <div class="my">
    <div class="my-information">
        <div class="my-img">
            <img src="http://ooa3lxrpg.bkt.clouddn.com/b.jpg?imageView2/1/w/120/h/120/q/75" rel="图片">
            <a href="https://github.com/cspp01"></a>
        </div>
        <span>cc</span>
        <p>求知若饥 虚心若愚</p>
    </div>
    <p class="my-social">
        
            <a href="https://github.com/cspp01" class="my-social-me5">github</a>
        
            <a href="/" class="my-social-me2">twitter</a>
        
            <a href="http://weibo.com/5262373626/profile?topnav=1&wvr=6&is_all=1" class="my-social-me2">weibo</a>
        
            <a href="http://douban.com/people/160374034/" class="my-social-me2">豆瓣</a>
        
            <a href="http://www.zhihu.com/people/cc-chen-4-85" class="my-social-me1">知乎</a>
        
    </p>
    <div class="my-post">
        <a href="/archives">
            <strong>19</strong><br>
            <span>posts</span>
        </a>
        <a href="/categories">
            <strong>11</strong><br>
            <span>categories</span>
        </a>
        <a href="/tags">
            <strong>21</strong><br>
            <span>tags</span>
        </a>
    </div>
    <div class="search-rss">
        <div class="my-search">
            <a href="javascript:void(0)" id ='my-search-a' class="popup-trigger">search</a>
        </div>
        
            <div class="my-rss">
                <a href="/atom.xml">rss</a>
            </div>
        
    </div>
    <div class="my-links">
        <ul class="clearfix">
            
            <li>
                <a href="/">
                    <img src="http://ooa3lxrpg.bkt.clouddn.com/timg.jpg">
                    <p>ccblog</p>
                </a>
            </li>
            
            <li>
                <a href="/">
                    <img src="http://ooa3lxrpg.bkt.clouddn.com/timg%20%282%29.jpg">
                    <p>boc</p>
                </a>
            </li>
            
            <li>
                <a href="/">
                    <img src="http://ooa3lxrpg.bkt.clouddn.com/timg%20%283%29.jpg">
                    <p>haha</p>
                </a>
            </li>
            
            <li>
                <a href="/">
                    <img src="http://ooa3lxrpg.bkt.clouddn.com/timg%20%283%29.jpg">
                    <p>pp</p>
                </a>
            </li>
            
            <li>
                <a href="/">
                    <img src="http://ooa3lxrpg.bkt.clouddn.com/timg%20%281%29.jpg">
                    <p>oop</p>
                </a>
            </li>
            
        </ul>
    </div>
    <div class="hot-page">
        
    </div>
</div>
            
        </section>
    </div>
    <footer id="footer">
    <p>© 2017  cc | <iframe src="https://ghbtns.com/github-btn.html?user=cspp01&repo=cspp01.github.io&type=star&count=true" >
        </iframe><br/>
        concise theme, this world is mine.  | cc'blog | Fork me on Github
        
            | <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1261969111'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1261969111%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>
        
    </p>
</footer>
</div>
<label for="left-information"></label>


    <div class="site-search">
        <div class="algolia-popup popup">
            <div class="algolia-search">
                <div class="algolia-search-input-icon">
                    <i class="fa fa-search"></i>
                </div>
                <div class="algolia-search-input" id="algolia-search-input"></div>
            </div>

            <div class="algolia-results">
                <div id="algolia-stats"></div>
                <div id="algolia-hits"></div>
                <div id="algolia-pagination" class="algolia-pagination"></div>
            </div>

            <span class="popup-btn-close">
          <i class="fa fa-times-circle"></i>
        </span>
        </div>
    </div>


<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script>
<script>AV.initialize("rRxCAb8Kk2bhhTQJInFKaY4v-gzGzoHsz", "eEp5YWpvXhpv3Jvheh4bHCfG");</script>
<script>
    function showTime(test) {
        var query = new AV.Query(test);
        var entries = [];
        var $visitors = $(".leancloud_visitors");

        $visitors.each(function () {
            entries.push( $(this).attr("id").trim() );
        });

        query.containedIn('url', entries);
        query.find()
            .done(function (results) {
                var COUNT_CONTAINER_REF = '.leancloud-visitors-count';

                if (results.length === 0) {
                    $visitors.find(COUNT_CONTAINER_REF).text(0);
                    return;
                }

                for (var i = 0; i < results.length; i++) {
                    var item = results[i];
                    var url = item.get('url');
                    var time = item.get('time');
                    var element = document.getElementById(url);

                    $(element).find(COUNT_CONTAINER_REF).text(time);
                }
            })
            .fail(function (object, error) {
                console.log("Error: " + error.code + " " + error.message);
            });
    }

    function addCount(test) {
        var $visitors = $(".leancloud_visitors");
        var url = $visitors.attr('id').trim();
        var title = $visitors.attr('data-flag-title').trim();
        var query = new AV.Query(test);

        query.equalTo("url", url);
        query.find({
            success: function(results) {
                if (results.length > 0) {
                    var counter = results[0];
                    counter.fetchWhenSave(true);
                    counter.increment("time");
                    counter.save(null, {
                        success: function(counter) {
                            var $element = $(document.getElementById(url));
                            $element.find('.leancloud-visitors-count').text(counter.get('time'));
                        },
                        error: function(counter, error) {
                            console.log('Failed to save Visitor num, with error message: ' + error.message);
                        }
                    });
                } else {
                    var newcounter = new test();
                    /* Set ACL */
                    var acl = new AV.ACL();
                    acl.setPublicReadAccess(true);
                    acl.setPublicWriteAccess(true);
                    newcounter.setACL(acl);
                    /* End Set ACL */
                    newcounter.set("title", title);
                    newcounter.set("url", url);
                    newcounter.set("time", 1);
                    newcounter.save(null, {
                        success: function(newcounter) {
                            var $element = $(document.getElementById(url));
                            $element.find('.leancloud-visitors-count').text(newcounter.get('time'));
                        },
                        error: function(newcounter, error) {
                            console.log('Failed to create');
                        }
                    });
                }
            },
            error: function(error) {
                console.log('Error:' + error.code + " " + error.message);
            }
        });
    }

    $(function() {
        var test = AV.Object.extend("Counter");
        if ($('.leancloud_visitors').length == 1) {
            addCount(test);
        } else if ($('.leancloud_visitors').length > 1) {
            showTime(test);
        }
    });
</script>



<script>
    (function(){
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

</body>

</html>